<script lang="ts" setup>
	import { ref, watch, reactive } from "vue";
	import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
	import { getGoodsList } from "@/apis/goods/index";

	const keyword = ref("");
	// const baseURL = "http://192.168.0.162:3333";
	const baseURL = "https://www.yunyoutongxin.com";
	const appletType = ref('0')
	const list = ref<any>([
		{ name: "靓号", opt: "" },
		{ name: "流量卡", opt: 3 },
		{ name: "宽带", opt: 2 },
		{ name: "充值中心", opt: 1 },
		{ name: "更多惊喜", opt: 4 },
	]);

	//分类
	const opt = ref("");
	const currentIndex = ref(0)
	const changeOpt = (item : any) => {
		console.log(item);
		currentIndex.value = item.index
		opt.value = item.opt;
	};


	const orderList = ref<any>([]);
	// 定义当前页
	let page = 1;
	// 定义当前页容量
	const size = 10;
	// 定义商品总条数
	const counts = ref(0);

	const loadData = async () => {
		// 测试套餐接口
		setTimeout(() => {
			getGoodsListEffect('');
		}, 100);
	};
	loadData();
	const getGoodsListEffect = async (cb : any) => {

		await getGoodsList({
			page,
			size,
			type: appletType.value,
			operator: opt.value,
		}).then((res : any) => {
			console.log(res);
			if (res.data.code == 200) {
				orderList.value.push(...res.data.data.list);
				counts.value = res.data.data.total;
			}
		});
		cb && cb()
	};


	// 上拉触底的事件
	onReachBottom(() => {
		if (page * size >= counts.value) return uni.showToast({ title: '数据加载完毕' })
		page++;
		getGoodsListEffect('')
	})


	// 下拉刷新的事件
	onPullDownRefresh(() => {
		page = 1
		orderList.value = []
		counts.value = 0
		keyword.value = ''
		getGoodsListEffect(() => uni.stopPullDownRefresh())

	})


	// 搜索框搜索
	const searchByKey = (val : any) => {
		console.log(val)
		keyword.value = val
		orderList.value = [];
		page = 1;
		getGoodsListEffect('');
	}

	//监听tabs切换
	watch([() => opt.value], (newValue) => {
		orderList.value = [];
		page = 1;
		getGoodsListEffect('');
	});
	const goCreat = (item : any) => {
		uni.navigateTo({
			url: `/pages/orderCreate/index?pid=${item.id}&&spid=${item.package_super}&&tid=${item.type}`,
		});
	}
</script>
<template>

	<view class="search-box">
		<uv-search @search='searchByKey' placeholder="请输入套餐名关键字" v-model="keyword" :showAction="false"></uv-search>
	</view>


	<view class="tabs" style="padding: 20rpx 0;background-color: #fff;border-radius: 20rpx 20rpx 0 0;">
		<uv-tabs :list="list" :current="currentIndex" @click="changeOpt" lineWidth="0" lineHeight="0"
			:customStyle="{width:'100%'}" :itemStyle="{
        width: '20%',
        background: '#fff',
        boxSizing: 'border-box',
        padding: '10rpx',
      }" :activeStyle="{
	  			color: '#303133',
	  			fontWeight: 'bold',
	  			transform: 'scale(1.05)'
	      	}">
		</uv-tabs>

	</view>
	<template v-if="orderList.length">
		<view class="item_box">
			<view class="goodItem" v-for="item in orderList" :key="item.id" @click="goCreat(item)">
				<view class="container">
					<view class="img">
						<uv-image :src="`${baseURL}/image/${item.img}`" radius="20rpx 20rpx 0 0" width="100%"
							height="340rpx"></uv-image>
					</view>
					<view class="text">
						<view class="title esp">{{ item.name }}</view>
						<view class="icon-list">
							限时优惠中
						</view>
						<view class="btn">
							<text class="dib">￥0.01元</text>
							<text class="dib under">￥9.9元</text>
							<view class="dib">
								<uv-icon name="shopping-cart" size="22" color="#fe4e4e"></uv-icon>
							</view>
							<view class="dib">
								<uv-button type="primary" size="small" color='#fb4c46' shape='circle'
									text="去抢购"></uv-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</template>
	<view style="padding: 60rpx; text-align: center" v-else>
		<uv-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png"></uv-empty>
	</view>

	<Footer :tabbar="0"></Footer>
</template>
<style lang="scss" scoped>
	.search-box {
		position: relative;
		z-index: 0;
		background-color: #fff;
		padding: 20rpx;
	}


	.item_box {
		background-color: #fff;
		padding-bottom: 100rpx;
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		justify-content: space-around
	}

	.goodItem {
		border-radius: 10rpx;
		padding: 20rpx 10rpx 20rpx 10rpx;
		box-sizing: border-box;
		width: 50%;



		.container {
			.text {
				vertical-align: middle;
				// padding-left: 20rpx;
				background: #fff5f6;
				padding: 16rpx 8rpx;

				.title {
					vertical-align: middle;
					font-size: 26rpx;
					font-weight: 600;
				}

				.esp {
					display: inline-block;
					width: 65%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

				}

				.icon-list {
					display: inline-block;
					font-size: 24rpx;
					color: #fe4e4e;
					vertical-align: middle;
				}

				.btn {
					color: #fe0000;
					margin-top: 18rpx;
					font-size: 22rpx;
				}

			}


		}

		.dib {
			display: inline-block;
			vertical-align: middle;
			margin-right: 10rpx;
		}

		.under {
			color: #b8afaf;
			text-decoration: line-through
		}

		:deep(.uv-button-wrapper) {
			display: inline-block;
			margin-right: 10rpx;
		}

		.share-link {
			padding: 20rpx 0;

			.grid-text {
				color: #3369ff;
			}

			:deep(.uv-grid-item) {
				padding: 20prx;
			}
		}
	}

	.mb {
		margin-bottom: 30rpx;
	}

	.poxPost {
		position: fixed;
		top: 100rpx;
	}

	:deep(.uv-button--small) {
		min-width: 100rpx !important;
		height: 50rpx !important;
		padding: 0rpx 14rpx !important;
		font-size: 24rpx !important;
	}

	:deep(.uv-tabs__wrapper__nav) {
		width: 100%;
	}


	.icon-item {
		display: inline-block;
		font-size: 20rpx;
		color: sandybrown;
		padding: 0 6rpx;
		border: 1px sandybrown solid;
		border-radius: 6rpx;
		margin-right: 10rpx;
	}

	.icon-item1 {
		border: 0;
		background: linear-gradient(135deg, #ff9a9e, #fad0c4);
		color: #fff;
	}

	.dg {
		color: #e29e88;
		font-size: 20rpx;
		padding-bottom: 10rpx;
	}

	.hot {
		width: 710rpx;
		padding: 18rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		background: linear-gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee);
	}

	.h-item {
		position: relative;
		padding: 16rpx;
		padding-bottom: 28rpx;
		margin-right: 10rpx;
		background-color: #fff;
		border-radius: 18rpx;

		.jiaobiao {
			position: absolute;
			top: -28rpx;
			left: -35rpx;
			width: 140rpx;
			height: 140rpx;
		}

		.img {
			width: 260rpx;
			height: 162.5rpx;
			border-radius: 10rpx;
		}
	}

	:deep(.uv-tabs__wrapper__nav__item__text) {
		font-size: 20rpx !important;
	}
</style>